/**
 * 通用样式组件库
 * 提取项目中重复使用的样式，提供统一的视觉规范
 */

// 导入变量和颜色模块
@use '../variables.scss' as *;
@use 'sass:color';

// ==================== 卡片样式 ====================
.card {
  background: #fff;
  border-radius: $border-radius-lg;
  box-shadow: $shadow;
  transition: $transition-base;
  border: 1px solid $border-color-lighter;

  &:hover {
    box-shadow: $shadow-lg;
  }

  &--elevated {
    box-shadow: $shadow-lg;
  }

  &--flat {
    box-shadow: none;
    border: 1px solid $border-color;
  }

  &--bordered {
    border: 2px solid $primary-color;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $spacing-lg;
  border-bottom: 1px solid $border-color-lighter;
  background: $bg-color-page;

  &__title {
    font-size: $font-size-large;
    font-weight: $font-weight-bold;
    color: $text-color;
    margin: 0;
  }

  &__actions {
    display: flex;
    gap: $spacing-sm;
    align-items: center;
  }
}

.card-body {
  padding: $spacing-lg;
}

.card-footer {
  padding: $spacing-lg;
  border-top: 1px solid $border-color-lighter;
  background: $bg-color-page;
}

// ==================== 按钮样式 ====================
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: $spacing-xs;
  padding: $button-padding;
  border-radius: $button-border-radius;
  font-size: $font-size-base;
  font-weight: $font-weight-medium;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: $transition-base;
  border: 1px solid transparent;
  min-height: $button-height;

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &--primary {
    background-color: $primary-color;
    color: #fff;
    border-color: $primary-color;

    &:hover:not(:disabled) {
      background-color: color.adjust($primary-color, $lightness: 10%);
      border-color: color.adjust($primary-color, $lightness: 10%);
    }
  }

  &--success {
    background-color: $success-color;
    color: #fff;
    border-color: $success-color;

    &:hover:not(:disabled) {
      background-color: color.adjust($success-color, $lightness: 10%);
      border-color: color.adjust($success-color, $lightness: 10%);
    }
  }

  &--warning {
    background-color: $warning-color;
    color: #fff;
    border-color: $warning-color;

    &:hover:not(:disabled) {
      background-color: color.adjust($warning-color, $lightness: 10%);
      border-color: color.adjust($warning-color, $lightness: 10%);
    }
  }

  &--danger {
    background-color: $danger-color;
    color: #fff;
    border-color: $danger-color;

    &:hover:not(:disabled) {
      background-color: color.adjust($danger-color, $lightness: 10%);
      border-color: color.adjust($danger-color, $lightness: 10%);
    }
  }

  &--outline {
    background-color: transparent;
    color: $primary-color;
    border-color: $primary-color;

    &:hover:not(:disabled) {
      background-color: $primary-color;
      color: #fff;
    }
  }

  &--ghost {
    background-color: transparent;
    color: $text-color;
    border-color: $border-color;

    &:hover:not(:disabled) {
      background-color: $bg-color-page;
      border-color: $primary-color;
      color: $primary-color;
    }
  }

  &--small {
    padding: $spacing-xs $spacing-sm;
    font-size: $font-size-small;
    min-height: $button-height-small;
  }

  &--large {
    padding: $spacing-sm $spacing-lg;
    font-size: $font-size-large;
    min-height: $button-height-large;
  }

  &--block {
    width: 100%;
  }

  &--loading {
    position: relative;
    pointer-events: none;

    &::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      border: 2px solid transparent;
      border-top: 2px solid currentColor;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// ==================== 输入框样式 ====================
.input {
  position: relative;
  display: inline-block;
  width: 100%;

  &__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid $border-color;
    border-radius: $input-border-radius;
    transition: $transition-base;
    min-height: $input-height;

    &:hover {
      border-color: $primary-color;
    }

    &.is-focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
    }

    &.is-disabled {
      background-color: $bg-color-page;
      border-color: $border-color-light;
      cursor: not-allowed;
    }

    &.is-error {
      border-color: $danger-color;
    }
  }

  &__inner {
    flex: 1;
    padding: $input-padding;
    border: none;
    outline: none;
    background: transparent;
    font-size: $font-size-base;
    color: $text-color;

    &::placeholder {
      color: $text-color-placeholder;
    }

    &:disabled {
      color: $text-color-disabled;
      cursor: not-allowed;
    }
  }

  &__prefix,
  &__suffix {
    display: flex;
    align-items: center;
    padding: 0 $spacing-sm;
    color: $text-color-placeholder;
  }

  &__prefix {
    border-right: 1px solid $border-color-light;
  }

  &__suffix {
    border-left: 1px solid $border-color-light;
  }

  &--small {
    .input__wrapper {
      min-height: $input-height-small;
    }

    .input__inner {
      padding: $spacing-xs $spacing-sm;
      font-size: $font-size-small;
    }
  }

  &--large {
    .input__wrapper {
      min-height: $input-height-large;
    }

    .input__inner {
      padding: $spacing-sm $spacing-lg;
      font-size: $font-size-large;
    }
  }
}

// ==================== 状态标签样式 ====================
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius;
  font-size: $font-size-small;
  font-weight: $font-weight-medium;
  line-height: 1;

  &--success {
    background-color: rgba($success-color, 0.1);
    color: $success-color;
    border: 1px solid rgba($success-color, 0.3);
  }

  &--warning {
    background-color: rgba($warning-color, 0.1);
    color: $warning-color;
    border: 1px solid rgba($warning-color, 0.3);
  }

  &--danger {
    background-color: rgba($danger-color, 0.1);
    color: $danger-color;
    border: 1px solid rgba($danger-color, 0.3);
  }

  &--info {
    background-color: rgba($info-color, 0.1);
    color: $info-color;
    border: 1px solid rgba($info-color, 0.3);
  }

  &--primary {
    background-color: rgba($primary-color, 0.1);
    color: $primary-color;
    border: 1px solid rgba($primary-color, 0.3);
  }

  &--dot {
    &::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: currentColor;
      margin-right: $spacing-xs;
    }
  }
}

// ==================== 加载状态样式 ====================
.loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: $spacing-sm;

  &__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  &__text {
    font-size: $font-size-small;
    color: $text-color-secondary;
  }

  &--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: $z-index-modal;
    flex-direction: column;
    gap: $spacing-md;

    .loading__spinner {
      width: 32px;
      height: 32px;
      border-width: 3px;
    }

    .loading__text {
      font-size: $font-size-base;
    }
  }
}

// ==================== 空状态样式 ====================
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $spacing-xxl;
  text-align: center;
  color: $text-color-secondary;

  &__icon {
    font-size: 48px;
    margin-bottom: $spacing-lg;
    opacity: 0.5;
  }

  &__title {
    font-size: $font-size-large;
    font-weight: $font-weight-medium;
    color: $text-color;
    margin-bottom: $spacing-sm;
  }

  &__description {
    font-size: $font-size-base;
    margin-bottom: $spacing-lg;
  }

  &__action {
    margin-top: $spacing-lg;
  }
}

// ==================== 分割线样式 ====================
.divider {
  border: none;
  height: 1px;
  background: $border-color-light;
  margin: $spacing-lg 0;

  &--vertical {
    width: 1px;
    height: auto;
    margin: 0 $spacing-lg;
  }

  &--dashed {
    background: none;
    border-top: 1px dashed $border-color;
  }

  &--text {
    position: relative;
    text-align: center;
    color: $text-color-placeholder;
    font-size: $font-size-small;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: $border-color-light;
    }

    &::after {
      content: attr(data-text);
      position: relative;
      background: #fff;
      padding: 0 $spacing-sm;
    }
  }
}

// ==================== 工具类 ====================
.text {
  &--center { text-align: center; }
  &--left { text-align: left; }
  &--right { text-align: right; }
  &--justify { text-align: justify; }

  &--primary { color: $primary-color; }
  &--success { color: $success-color; }
  &--warning { color: $warning-color; }
  &--danger { color: $danger-color; }
  &--info { color: $info-color; }
  &--muted { color: $text-color-secondary; }
  &--disabled { color: $text-color-disabled; }

  &--bold { font-weight: $font-weight-bold; }
  &--medium { font-weight: $font-weight-medium; }
  &--normal { font-weight: $font-weight-normal; }

  &--small { font-size: $font-size-small; }
  &--base { font-size: $font-size-base; }
  &--large { font-size: $font-size-large; }
  &--xl { font-size: $font-size-extra-large; }
}

.flex {
  display: flex;

  &--center {
    align-items: center;
    justify-content: center;
  }

  &--between {
    justify-content: space-between;
  }

  &--around {
    justify-content: space-around;
  }

  &--end {
    justify-content: flex-end;
  }

  &--column {
    flex-direction: column;
  }

  &--wrap {
    flex-wrap: wrap;
  }

  &--nowrap {
    flex-wrap: nowrap;
  }
}

.spacing {
  &--xs { margin: $spacing-xs; }
  &--sm { margin: $spacing-sm; }
  &--md { margin: $spacing-md; }
  &--lg { margin: $spacing-lg; }
  &--xl { margin: $spacing-xl; }
  &--xxl { margin: $spacing-xxl; }

  &--t-xs { margin-top: $spacing-xs; }
  &--t-sm { margin-top: $spacing-sm; }
  &--t-md { margin-top: $spacing-md; }
  &--t-lg { margin-top: $spacing-lg; }
  &--t-xl { margin-top: $spacing-xl; }
  &--t-xxl { margin-top: $spacing-xxl; }

  &--b-xs { margin-bottom: $spacing-xs; }
  &--b-sm { margin-bottom: $spacing-sm; }
  &--b-md { margin-bottom: $spacing-md; }
  &--b-lg { margin-bottom: $spacing-lg; }
  &--b-xl { margin-bottom: $spacing-xl; }
  &--b-xxl { margin-bottom: $spacing-xxl; }

  &--l-xs { margin-left: $spacing-xs; }
  &--l-sm { margin-left: $spacing-sm; }
  &--l-md { margin-left: $spacing-md; }
  &--l-lg { margin-left: $spacing-lg; }
  &--l-xl { margin-left: $spacing-xl; }
  &--l-xxl { margin-left: $spacing-xxl; }

  &--r-xs { margin-right: $spacing-xs; }
  &--r-sm { margin-right: $spacing-sm; }
  &--r-md { margin-right: $spacing-md; }
  &--r-lg { margin-right: $spacing-lg; }
  &--r-xl { margin-right: $spacing-xl; }
  &--r-xxl { margin-right: $spacing-xxl; }
}

// ==================== 响应式工具类 ====================
@media (max-width: $breakpoint-sm) {
  .hidden-xs { display: none !important; }
  .visible-xs { display: block !important; }
}

@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md) {
  .hidden-sm { display: none !important; }
  .visible-sm { display: block !important; }
}

@media (min-width: $breakpoint-md) and (max-width: $breakpoint-lg) {
  .hidden-md { display: none !important; }
  .visible-md { display: block !important; }
}

@media (min-width: $breakpoint-lg) {
  .hidden-lg { display: none !important; }
  .visible-lg { display: block !important; }
}
